<template>
    <div>
        <!-- 顶部导航栏 -->
        <div class="catalogueListTop">
            <div class="catalogueListContainer">
                <div class="CLT_back" @click="$router.go(-1)">
                    <span class="iconfont icon-zuojiantou"></span>
                </div>
                <div class="CLT_name">
                    <span>{{titlename}}</span>
                </div>
            </div>
        </div>
        <!-- 目录列表 -->
        <div class="catalogueListBox">
            <ul class="catalogueListContainer" v-for="item in navPointlist" :key="item.id">
                <!-- <li @click="clickBtn(item.index)"></li> -->
                <router-link tag="li" :to="'/ReadThePage?id='+bookID+'&index='+item.index">{{item.navLabel.split(',')[1]}}</router-link>
            </ul>
        </div>
    </div>
</template>

<script>
import {getBookCatalog} from "../api/catalogueList"
export default {
    data(){
        return{
            bookID:null,
            navPointlist:[],
            titlename:null,
        }
    },
    methods:{
        // 点击进入阅读
        // clickBtn(index){
        //     this.$store.commit("getChapterFun",index)
        // },
        // 获取小说章节
        getBookCatalogFun(id){
            getBookCatalog({tocId:id}).then(data=>{
                this.navPointlist = data.ncx.navMap.navPoint.navPoint;
                console.log(this.navPointlist);
                this.titlename = data.ncx.docTitle.split(',')[1];
                console.log(this.titlename);
            })
        }
    },
    created(){
        this.bookID = this.$route.query.id
        console.log(this.bookID);
        this.getBookCatalogFun(this.bookID);
    }
}
</script>

<style lang="less">
.catalogueListContainer{
    width: 92%;
    margin: 0px auto;
}
.catalogueListTop{
    padding: 13px 0px;
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid #eee;
    .catalogueListContainer{
        position: relative;
        text-align: center;
        .CLT_back{
            position: absolute;
            top: 0px;
            left: 0px;
            span{
                font-size: 24px;
            }
        }
        .CLT_name{
            font-size: 20px;
            line-height: 24px;
            font-weight: bold;
        }
    }
}
.catalogueListBox{
    padding-top: 60px;
    background-color: #fff;
    padding-bottom: 10px;
    .catalogueListContainer{
        li{
            font-weight: bold;
            padding: 10px 0px;
        }
    }
}
</style>